<template>
  <footer class="unify-footer">
    <div class="internal-links">
      <div class="wrapper">
        <div class="link-wrapper">
          <dl class="link-group" :class="group.lclass?group.lclass:''" v-for="group in links">
            <dt class="group-title">{{group.title}}</dt>
            <dd class="item" v-for="link in group.list">
              <a :href="link.link">{{link.label}}</a>
            </dd>
          </dl>
        </div>
      </div>
      <div class="wrapper">
        <div class="blogroll">
          <div class="wrapper">
            <span class="blogroll-label">友情链接</span>
            <ul class="blogroll-list">
              <li class="item" v-for="item in blogroll">
                <a :href="item.link">{{item.label}}</a>
              </li>
            </ul>
            <div class="logo-small"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="copyright-info">
      <div class="wrapper">
        <span class="copyright">Copyright ©2002-2017 www.artup.com. All rights reserved.</span>
        <div class="records">
          <a href="http://www.miitbeian.gov.cn/" target="_blank" class="icp">京ICP备13034505号-1</a>
          <a href="http://www.beian.gov.cn/" target="_blank" class="beijing-police">京公网安备11011302000949-1</a>
        </div>
      </div>
    </div>
  </footer>
</template>

<script type="text/ecmascript-6">
  export default {
    data: function () {
      return {
        links: [{
          title: '常见问题',
          list: [{
            label: '使用帮助',
            link: '/help.html#/personalpage'
          }, {
            label: '支付方式',
            link: '/help.html#/payment'
          }]
        }, {
          title: '售后服务',
          list: [{
            label: '配送流程',
            link: '/help.html#/deliveryProcess'
          }, {
            label: '退换货',
            link: '/help.html#/return'
          }]
        }, {
          title: '官方微信',
          lclass: 'show-wechat',
          list: [{
            label: '',
            link: 'javascript:void(0);'
          }]
        }, {
          title: '关于我们',
          list: [{
            label: '传给雅昌',
            link: '/help.html'
          }, {
            label: '联系我们',
            link: '/help.html#/contact'
          }, {
            label: '服务条款',
            link: '/help.html#/serviceTerms'
          }]
        }, {
          title: '合作专区',
          list: [{
            label: '站点地图',
            link: '/help.html#/siteMap'
          }, {
            label: '商务合作',
            link: '/help.html#/cooperation'
          }]
        }],
        blogroll: [{
          label: '雅昌文化集团',
          link: 'http://www.artron.com.cn/'
        }, {
          label: '雅昌艺术网',
          link: 'http://www.artron.net/'
        }]
      }
    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/sass">

  .unify-footer {
    font-size: 0;
    background: #f9f8f8;
    a {
      color: #000;
      outline: 0;
    }
    .wrapper {
      width: 966px;
      margin: 0 auto;
    }
    .internal-links {
      .wrapper {
        overflow: hidden;
      }
      .link-wrapper {
        width: 1108px;
      }
      padding-top: 106px;
      .link-group {
        display: inline-block;
        margin-right: 142px;
        vertical-align: top;
        font-size: 22px;
        color: #000;
        line-height: 1;
        text-align: center;
        .group-title {
          font-weight: bold;
          margin-bottom: 20px;
          font-size: 14px;
          line-height: 34px;
        }
        .item a {
          font-size: 14px;
          line-height: 32px;
        }
        &.show-wechat {
          width: 174px;
          text-align: center;
          a {
            display: block;
            margin: 0 auto;
            width: 96px;
            height: 96px;
            background: url('./images/wxlogo2.png') no-repeat;
            background-size: 100% 100%;
          }
        }
        &:first-child {
          text-align: left;
        }
        &:last-child {
          text-align: right;
        }
      }
      .blogroll {
        margin-top: 80px;
        font-size: 14px;
        color: #000;
        text-align: left;
        line-height: 48px;
        .blogroll-label {
          &:after {
            content: '';
            position: relative;
            top: -2px;
            display: inline-block;
            margin: 0 20px 0 3px;
            width: 0;
            height: 0;
            border-top: 3px solid transparent;
            border-left: 6px solid #000;
            border-bottom: 3px solid transparent;
          }
        }
        .blogroll-list {
          display: inline-block;
          .item {
            display: inline-block;
            margin-right: 34px;
          }
        }
        .logo-small {
          float: right;
          width: 24px;
          height: 23px;
          margin-top: 20px;
          background: url('./images/logo-small.png') no-repeat;
        }
      }
    }
    .copyright-info {
      padding-bottom: 20px;
      font-size: 14px;
      border-top: 2px solid #b5b5b6;
      .copyright, .records {
        line-height: 38px;
      }
      .records {
        float: right;
        a {
          margin-left: 16px;
        }
      }
    }
  }
</style>
